<!-- 头部组件 -->
<template>
    <el-header>
        <div class="l-content">
            <el-button size="small" @click='handlecoll'>
                <el-icon :size="20">
                    <Menu />
                </el-icon>
            </el-button>
            <!-- 面包屑 -->
            <el-breadcrumb separator="/" class="bread" >
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="current.path" v-if="current">{{current.label}}</el-breadcrumb-item>
            
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="droimg" :src="getSrc('ka')">
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item @click="exit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
import { useStore } from 'vuex'
import {computed} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
let store = useStore()
//图标动态资源的引入
const getSrc = (user) => {
    return new URL(`../assets/img/${user}.png`, import.meta.url).href
}
const handlecoll = () => {
    store.commit('updateIsCollapse')
}
//计算属性 面包屑的相关值
let current=computed(()=>{
    return store.state.CurrentMent
})
//退出功能
const exit=()=>{
    //清除menu数据 然后跳转
    store.commit('clearMenu')
    store.commit('clearToken')
    router.push({name:'login'})
}
</script>

<style lang="less" scoped>
.r-content {
    .droimg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #333;

}

.l-content {
    display: flex;
    align-items: center;

    h3 {
        color: #fff;
        margin-left: 20px;
    }
}
:deep(.bread span) {
    color: #fff;
}
</style>